<template>
    <div>
        <m-notification :value="40"></m-notification>
        <br> <br>
        <m-notification :max="30" :value="40"></m-notification>
        <br> <br>
        <m-notification :isDot="true" :value="40"></m-notification>
        <br> <br>
        <m-notification icon="addlocation" :isDot="true" :value="40"></m-notification>
        <br> <br>
        <m-notification :value="50">
            <template #default>
                <m-list :list="list" :actions="actions" @clickItem="clickItem" @clickAction="clickAction" />
            </template>
        </m-notification>
    </div>
</template>
<script lang="ts" setup>
import { list, actions } from './data'
import { ListItem, ActionOptions } from '../../components/list/src/types'
const clickItem = (item: ListItem, index: number) => {
    console.log(item, index)
}
const clickAction = (action: ActionOptions, index: number) => {
    console.log(action, index)
}
</script> 
<style lang="scss" scoped>
</style>